<template>
  <div class="mini-program-preview-container">
    <div class="mini-program-preview">
      <!-- 模拟手机顶部状态栏 -->
      <div class="mini-program-header">
        <div class="status-bar">
          <span class="time">{{ currentTime }}</span>
          <div class="signal">
            <i class="el-icon-signal"></i>
            <i class="el-icon-wifi"></i>
            <i class="el-icon-battery-full"></i>
          </div>
        </div>
        <!-- 模拟小程序标题栏 -->
        <div class="nav-bar">
          <span class="back-button"><i class="el-icon-arrow-left"></i></span>
          <span class="page-title">{{ pageTitle }}</span>
          <span class="more-button"><i class="el-icon-more"></i></span>
        </div>
      </div>
      <!-- 模拟小程序内容区 -->
      <div class="mini-program-content" v-html="content"></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

// 定义组件属性
const props = defineProps({
  // 预览内容
  content: {
    type: String,
    default: ''
  },
  // 页面标题
  pageTitle: {
    type: String,
    default: '预览页面'
  },
  // 组件标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示标题
  showTitle: {
    type: Boolean,
    default: true
  }
});

// 格式化当前时间用于模拟手机状态栏
const currentTime = computed(() => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  return `${hours}:${minutes}`;
});
</script>

<style scoped>
/* 模拟小程序预览样式 */
.mini-program-preview-container {
  width: 380px;
  flex-shrink: 0;
}

.mini-program-preview {
  width: 375px;
  height: 667px;
  border: 1px solid #ddd;
  border-radius: 20px;
  overflow: hidden;
  background-color: #f8f8f8;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 顶部状态栏 */
.mini-program-header {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.status-bar {
  height: 20px;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #000;
}

.signal {
  display: flex;
  gap: 3px;
}

/* 小程序导航栏 */
.nav-bar {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 500;
  position: relative;
  background-color: #fff;
}

.page-title {
  text-align: center;
  flex: 1;
  font-weight: bold;
}

.back-button,
.more-button {
  width: 30px;
  text-align: center;
  color: #007aff;
}

/* 小程序内容区域 */
.mini-program-content {
  height: calc(100% - 64px);
  overflow-y: auto;
  padding: 15px;
  background-color: #fff;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

/* 内容样式调整 */
.mini-program-content :deep(h1),
.mini-program-content :deep(h2),
.mini-program-content :deep(h3) {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.mini-program-content :deep(p) {
  margin-bottom: 10px;
}

.mini-program-content :deep(img) {
  max-width: 100%;
  height: auto;
}

.mini-program-content :deep(ul),
.mini-program-content :deep(ol) {
  padding-left: 20px;
  margin-bottom: 10px;
}

.mini-program-content :deep(li) {
  margin-bottom: 5px;
}
</style>